<template>
  <view class="quest">

    <swiper class="head-bg">
      <swiper-item v-for="(item, index) in quest.scenicImgList" :key="item">
        <image :src="item" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!--  -->
    <view class="wrap">
      <!--  -->
      <view class="head">
        <view class="head-left">
          <image class="icon" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/renwu-icon.png">
          </image>
          <view>任务说明 ({{ quest.nowCount }}/{{ quest.allCount }})</view>
        </view>
        <!-- <view class="mark">40分</view> -->
      </view>
      <!--  -->
      <view class="problem">
        <text class="t">知识问答：</text>
        <view class="p">任务名称:{{ quest.title }}</view>
        <view class="p">任务说明:{{ quest.taskText }}</view>
        <view class="p">
          <text>({{ ["团队任务", '个人任务'][quest.taskType] }})</text>
          <text v-if="quest.completer" style="color: red;">该任务已由团队成员{{ quest.completer }}完成</text>
        </view>
        <view class="select">
          <!-- <view class="item" :style="{ 'color': abc[index] == i ? 'red': '' }" @click="choice(abc[index])" v-for="(item, index) in quest.testOptions" :key="item.id"> -->
          <!-- <view class="item" :style="{ 'color': abc[index] == quest.trueSelect ? 'red' : '' }" :class="abc[index] == i ? 'blue' : ''" @click="choice(abc[index])" v-for="(item, index) in quest.testOptions" :key="item.id"> -->
          <view v-for="(item, index) in quest.testOptions" :key="item.id"
                :class="iList.indexOf(abc[index])  != -1? 'blue' : ''" :style="{
							'background':
							abc[index] == quest.userSelect ?
							'url(https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/select2.png) no-repeat 0 0 / 100% 100%' :
							'url() no-repeat 0 0 / 100% 100%',
							'border': abc[index] == quest.userSelect ? 'none' : '',
							'box-shadow': abc[index] == quest.userSelect ? 'none' : '',
						}"
                class="item" @click="choice(abc[index])">
            <view class="abcd">{{ abc[index] }}</view>
            <text>{{ item.text }}</text>
          </view>
        </view>
      </view>
      <!--  -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      abc: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G'
      ],
      i: null,
      abcList: [],
      iList: []
    }
  },
  props: {
    quest: {
      type: Object,
      default: {}
    },
    completeCount: {
      typeof: Number,
      default: 0
    },
    sum: {
      typeof: Number,
      default: 0
    }
  },
  computed: {
    newCompleteCount() {
      return this.completeCount + 1 > this.sum ? this.sum : this.completeCount + 1
    }
  },
  onLoad() {

  },
  methods: {
    clear() {
      this.i = null
    },
    choice(abc) {
      this.abcList = []
      for (let i = 0; i < this.quest.trueSelect.length; i++) {
        this.abcList.push(this.quest.trueSelect[i])
      }
      console.log('看', this.abcList);
      if (this.abcList.length > 1) {
        console.log(this.iList.indexOf(abc));
        if (this.iList.indexOf(abc) == -1) {
          this.iList.push(abc)
        } else {
          this.iList.splice(this.iList.indexOf(abc), 1)
        }

      } else {
        this.iList = [abc]
      }

      console.log('结果', this.iList);
      // this.i = abc
      this.$emit('choice', this.iList)
    },
    onSubmit() {
      uni.showModal({
        content: '提交成功',
        cancelText: "重新选择",
        confirmText: "继续提交",
        success: (res) => {
          if (res.confirm) {
            this.toUrl('/pages/challenge/quest2')
          }
        }
      })
    },
    toUrl(url) {
      if (!url) return
      uni.navigateTo({
        url
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.quest {
  .head-bg {
    width: 100%;
    height: 350rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .wrap {
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .head-left {
    display: flex;
    align-items: center;
    font-size: 36rpx;
    line-height: 50rpx;
    color: rgba(0, 0, 0, 1);

    .icon {
      width: 45rpx;
      height: 45rpx;
      margin-right: 10rpx;
    }
  }

  .mark {
    width: 130rpx;
    height: 55rpx;
    border-radius: 20rpx;
    border: 1px solid rgba(201, 148, 2, 1);
    font-size: 30rpx;
    line-height: 55rpx;
    color: rgba(201, 148, 2, 1);
    text-align: center;
  }

  .problem {
    .t {
      font-size: 36rpx;
      font-weight: 700;
      line-height: 52.13rpx;
      color: rgba(56, 56, 56, 1);
    }

    .p {
      font-size: 32rpx;
      line-height: 46.34rpx;
      color: rgba(56, 56, 56, 1);
      margin-bottom: 20rpx;
    }

    .select {
      display: flex;
      flex-direction: column;
      align-items: center;

      .item {
        font-size: 24rpx;
        color: rgba(51, 51, 51, 1);
        width: 100%;
        height: 85rpx;
        border-radius: 50vh;
        background: rgba(255, 255, 255, 1);
        background-size: 100% 100%;
        border: 1rpx solid rgba(34, 139, 107, 1);
        box-shadow: 0px 1.37px 5.49px rgba(34, 139, 107, 1);
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;

        &.blue {
          // color: blue !important;
          border: none;
          box-shadow: none;
          background: url(https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/select1.png) no-repeat 0 0 / 100% 100% !important;
        }

        &:not(:last-child) {
          margin-bottom: 40rpx;
        }
      }

      .abcd {
        width: 48rpx;
        height: 48rpx;
        background: rgba(54, 52, 53, 1);
        font-size: 37.71rpx;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50vh;
        margin-right: 20rpx;
      }
    }
  }
}
</style>
